<template>
    <div v-red>
        <h3>注册</h3>
        <hr>
        账号： <input v-focus v-model="form.userName" type="text">
        <hr>
        密码： <input  v-model="form.userPwd" type="text">
        <hr>
        确认密码： <input v-model="form.userPwd2" type="text">
        <hr>
        手机号： <input v-model="form.phone" type="text">
        <hr>
        证件类型：
        <input type="radio" v-model="form.idcard" value="sfz">身份证
        <input type="radio" v-model="form.idcard" value="jgz">军官证
        <input type="radio" v-model="form.idcard" value="sbk">社保卡
        <input type="radio" v-model="form.idcard" value="jz">驾照
        <hr>
        <input type="checkbox" v-model="form.zy" value="hlw">互联网
        <input type="checkbox" v-model="form.zy" value="ys">医生
        <input type="checkbox" v-model="form.zy" value="sj">司机
        <input type="checkbox" v-model="form.zy" value="lb">老板
        <input type="checkbox" v-model="form.zy" value="ai">ai
        <hr>
        <select v-model="form.jg" v-red>
            <option value="hn">湖南</option>
            <option value="hb">湖北</option>
            <option value="gd">广东</option>
            <option value="sx">山西</option>
        </select>
        <hr>
        <button @click="submit">提交</button>
        <button @click="congzhi">重置</button>
   </div>
</template>

<script> 
    export default {
        data() {
            return {
                form:{
                    userName:'',
                    userPwd:'',
                    userPwd2:'',
                    phone:'',
                    idcard:'sfz',
                    zy:['hlw','ys'],
                    jg:'hn'
                }
            }
        },
        methods:{ 
            submit(){
                // 针对用户名字进行表单验证 要求单词6-10位
            let reg = /^\w{6,10}$/;
            let pwdReg = /^\d{6}$/
            let phoneReg = /^1[3-9]\d{9}$/
            if(!reg.test(this.form.userName)){
                alert('账号验证格式不正确，要求单词6-10位')
                return;
            }
            if(!pwdReg.test(this.form.userPwd)){
                alert('密码需要六个数字组成')
                return;
            }
            if(!pwdReg.test(this.form.userPwd2)||
            !this.form.userPwd2 == this.form.userPwd
            ){
                alert('重复密码格式不正确（或重复与密码不相同')
                return;
            }
            if(!phoneReg.test(this.form.phone)){
                alert('手机号码格式不正确')
                return;
            }
            console.log('当前格式正确',this.form);

            },
            congzhi(){

            }
        },
        watch: {
            'form.phone':(newValue,oldValue)=>{
                console.log(`新值${newValue},旧${oldValue}`);
                if(newValue.length == 11){
                    if(/^1[3-9]\d{9}$/.test(newValue)){
                        console.log('手机号码格式正确');
                    }else{
                        console.warn('手机号码格式错误');
                    }
                    alert('格式正确')
                }
            }
        },
        directives: {
            focus:{
                inserted:function(el){
                    el.focus()
                }
            },
            red:{
                inserted:function(el){
                    el.style.color = 'red'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
 
</style>